<template>
  <div>
    <gs-header :title="pageTitle"/>
    <div id="page-free-scroll-wrapper" class="page-free-scroll-wrapper">
      <div class="scroll-content">
        <ul class="scroll-list">
          <li v-for="i in 20" :key="i" class="item">
            小时候大部分的人应该都读过一本世界名著，那就是《钢铁是怎样炼成的》，记得小编小时候把这本书看了三遍，很喜欢保尔柯察金这个人物形象！后来长大后慢慢发现这本书的确是影响了中国的两代人左右，有没有人记得当年写读后感的时候，总会在结尾处写上：对保尔产生油然而生的敬意。这句话的？书的内容大部分人应该都看过，小编就不做一详细的介绍了，这本书的文学价值到底体现在哪里？首先看这本书的人应该明白的是作者的写作手法，《钢铁是怎样炼成的》算是属于现实主义文学，通过现实主义文学来表达社会现象，反映当时的社会和人物的形象。抨击当时社会的丑恶行为，正是文学作品的魅力所在，在俄国的文学作品中，讽刺艺术是比较传统的。
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import GsHeader from 'example/components/gs-header/gs-header'
import GScroll from 'src'

export default {
  name: 'PageFreeScroll',
  components: {
    GsHeader
  },
  mounted () {
    this.scroll = new GScroll('page-free-scroll-wrapper', {
      scrollX: true,
      scrollY: true,
      freeScroll: true,
      bounce: {
        top: false,
        left: false,
        bottom: false,
        right: false
      }
    })
  },
  data () {
    return {
      pageTitle: '双向滚动'
    }
  }
}
</script>

<style lang="scss">
.page-free-scroll-wrapper {
  position: relative;
  width: 80vw;
  max-width: 800px;
  height: calc(70vh - 45px);
  margin: 20vh auto;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  .scroll-content {
    position: absolute;
    width: 1500px;
    display: inline-block;
    .scroll-list {
      .item {
        padding: 15px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.5);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        user-select: none;
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
